<template>
   <div class="manage">
      <el-dialog
         title="新增用户"
         :visible.sync="dialogVisible"
         width="50%"
         :before-close="handleClose"
         >
         <!-- 用户的表单信息 -->
         <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="80px">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
               <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
               <el-select v-model="form.sex" placeholder="请选择">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
               <el-date-picker value-format="yyyy-MM-DD" type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="addr">
               <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
            </el-form-item>
         </el-form>



         <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
         </span>
      </el-dialog>
      <div class="manage-header">
         <el-button type="primary" @click="handleAdd" >
            +新增
         </el-button>
         <!-- form搜索区 -->
         <el-form :inline="true" :model="userForm">
            <el-form-item>
               <el-input v-model="userForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
         </el-form>
      </div>
      <div class="common-table">
         <el-table
         :data="tableData"
         style="width: 100%"
         height="90%"
         stripe>
            <el-table-column
               prop="name"
               label="姓名"
               >
            </el-table-column>
            <el-table-column
               prop="sex"
               label="性别">
               <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.sex == 1 ? '男' : '女' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               prop="age"
               label="年龄">
            </el-table-column>
            <el-table-column
               prop="birth"
               label="出生日期">
            </el-table-column>
            <el-table-column
               prop="addr"
               label="地址">
            </el-table-column>
            <el-table-column label="操作">
               <template slot-scope="scope">
               <el-button
                  size="mini"
                  @click="handleEdit(scope.row)">编辑</el-button>
               <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
         <div class="pager">
            <el-pagination
               layout="prev, pager, next"
               :total="total"
               @current-change="handlePage">
            </el-pagination>
         </div>
      </div>
   </div>
</template>
<script>
import {getUser,addUser,editUser,delUser} from '../api'
export default {
   name:'User',
   data() {
      return {
         dialogVisible: false,
         form: {
            name: '',
            age: '',
            sex: '',
            birth: '',
            addr: ''
         },
         rules: {
            name: [
               { required: true, message: '请输入姓名', trigger: 'blur' },
            ],
            age: [
               { required: true, message: '请输入年龄', trigger: 'blur' },
            ],
            sex: [
               { required: true, message: '请选择性别', trigger: 'blur' },
            ],
            birth: [
               { required: true, message: '请选择出生日期', trigger: 'blur' },
            ],
            addr: [
               { required: true, message: '请输入地址', trigger: 'blur' },
            ],
         },
         tableData: [],
         modalType: 0 ,  // 0表示新增弹窗，1表示编辑
         total:0 ,       // 当前的总条数
         pageData: {
            page: 1,
            limit: 10
         },
         userForm: {
            name:''
         }
      }
   },
   methods: {
      // 提交用户表单
      submit() {
         this.$refs.form.validate((valid) => {
            // console.log(valid)
            if (valid) {
               // 后续对表单进行数据处理
               if (this.modalType === 0) {
                  addUser(this.form).then(() => {
                     //重新获取列表数据
                     this.getList()
                  })
               } else {
                  editUser(this.form).then(() => {
                     //重新获取列表数据
                     this.getList()
                  })
               }
               console.log(this.form)
               // 清空表单
               this.$refs.form.resetFields()
               // 关闭弹窗
               this.dialogVisible = false              
            }
         })
      },
      // 弹框关闭的时候
      handleClose() {
         this.$refs.form.resetFields()
         this.dialogVisible = false
      },
      handleEdit(row) {
         this.modalType = 1
         this.dialogVisible = true
         // 注意需要对当前行数据进行深拷贝,否则会出错
         this.form = JSON.parse(JSON.stringify(row))
      },
      handleDelete(row) {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
            delUser({id: row.id}).then(() => {
               this.getList()
            })
            this.$message({
               type: 'success',
               message: '删除成功!'
            });
         }).catch(() => {
            this.$message({
               type: 'info',
               message: '已取消删除'
            });
         });
      },
      handleAdd() {
         this.modalType = 0
         this.dialogVisible = true
      },
      getList() {
         // 获取列表的数据
         getUser({params:{...this.userForm,...this.pageData}}).then(({ data }) => {
            // console.log(data)
            this.tableData = data.list
            this.total = data.count || 0
         })
      },
      // 选择页码的回调函数
      handlePage(val) {
         console.log(val)
         this.pageData.page = val
         this.getList()
      },
      // 列表的查询
      onSubmit() {
         this.getList()
      }
   },
   mounted() {
      this.getList()
   }
};
</script>
<style lang='less' scoped>
.manage {
   height: 90%;
   .manage-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   .common-table {
      position: relative;
      height: calc(100% - 62px);
      .pager {
         position: absolute;
         bottom: 0;
         right: 20px;
      }
   }
}
</style>